<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>分类管理</title>
        <style>
            body{
                margin: 0;
                font-family: 'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
                background-color: #f5f7fa;
            }

            .sidebar {
                width: 220px;
                background: #5a4e9a;
                color: white;
                height: 100vh;
                position: fixed;
                display: flex;
                flex-direction: column;
            }
            .sidebar a{
                color: white;
                text-decoration: none;
                padding: 15px 20px;
                display: block;
                border-left: 4px solid transparent;
            }
            .sidebar a:hover,
            .sidebar a.active{
                background: #7a6ccc;
                border-left: 4px solid #d3c9ff;
            }

            .header {
                margin-left: 220px; height: 60px; background: white; box-shadow: 0 2px 8px rgb(0 0 0 / 0.1);
                display: flex; align-items: center; justify-content: flex-end; padding: 0 20px;
            }
            .header a {
                color: #5a4e9a; text-decoration: none; font-weight: 600;
            }

            .content {
                margin-left: 220px; padding: 20px; min-height: calc(100vh - 60px);
            }
            h1 { color: #5a4e9a; }
            table {
                width: 100%; border-collapse: collapse; background: white; border-radius: 8px; overflow: hidden;
            }
            th, td {
                padding: 12px 15px; border-bottom: 1px solid #ddd; text-align: left;
            }
            th {
                background: #7a6ccc; color: white;
            }
            tr:hover {
                background: #f3f1ff;
            }
            button {
                background: linear-gradient(135deg, #a188ff, #7a6ccc);
                border: none; color: white; padding: 6px 12px; border-radius: 6px;
                cursor: pointer;
                transition: background 0.3s ease;
            }
            button:hover {
                background: linear-gradient(135deg, #c2b7ff, #9587d7);
            }
            input[type=text], input[type=number], select {
                padding: 8px 10px; border-radius: 6px; border: 1px solid #ccc; width: 100%;
                box-sizing: border-box;
                margin-top: 6px; margin-bottom: 16px;
            }
            label {
                font-weight: 600; color: #555;
            }
        </style>
    </head>
    <body>
    <div class="sidebar">
        <h2 style="text-align:center; margin:20px 0; font-weight:700;">后台管理</h2>
        <a href="${pageContext.request.contextPath}/admin/product/list" class="<%= request.getRequestURI().contains("/admin/product") ? "active" : "" %>">商品管理</a>
        <a href="${pageContext.request.contextPath}/admin/category/list" class="<%= request.getRequestURI().contains("/admin/category") ? "active" : "" %>">分类管理</a>
        <a href="${pageContext.request.contextPath}/admin/group/list" class="<%= request.getRequestURI().contains("/admin/group") ? "active" : "" %>">拼团活动管理</a>
        <a href="${pageContext.request.contextPath}/admin/order/list" class="<%= request.getRequestURI().contains("/admin/order") ? "active" : "" %>">订单管理</a>
    </div>

    <div class="header">
        <a href="${pageContext.request.contextPath}/front/login">退出登录</a>
    </div>

    <div class="content">
        <!-- 分类管理列表页 -->
        <h1>分类管理</h1>
        <c:if test="${not empty successMessage}">
            <div style="padding:10px; background:#e6ffed; border:1px solid #b7f0c3; color:#2e7d32; border-radius:6px; margin-bottom:20px;">
                    ${successMessage}
            </div>
        </c:if>

        <c:if test="${not empty errorMessage}">
            <div style="padding:10px; background:#fff0f0; border:1px solid #ffc7c7; color:#d32f2f; border-radius:6px; margin-bottom:20px;">
                    ${errorMessage}
            </div>
        </c:if>

        <a href="${pageContext.request.contextPath}/admin/category/addPage">
            <button>新增分类</button>
        </a>

        <table>
            <thead>
            <tr>
                <th>ID</th>
                <th>名称</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach var="category" items="${categoryList}">
                <tr>
                    <td>${category.id}</td>
                    <td>${category.name}</td>
                    <td><c:choose>
                        <c:when test="${category.status == 1}">启用</c:when>
                        <c:otherwise>禁用</c:otherwise>
                    </c:choose></td>
                    <td>
                        <a href="${pageContext.request.contextPath}/admin/category/editPage?id=${category.id}">
                            <button>编辑</button>
                        </a>
                        <a href="${pageContext.request.contextPath}/admin/category/delete?id=${category.id}" onclick="return confirm('确定删除吗？')">
                            <button>删除</button>
                        </a>
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>
    </body>
</html>